<template>
	<div class="fanwen_read">
		<div class="read_nav">
			<div class="back_btn" @click="back()"></div>
			<p>范文朗读</p>
		</div>
		<div class="prompt">
			<p>小朋友，本篇课文中有和家长的对话呦！<br/> 快去邀请爸爸妈妈一起参加录音吧！
			</p>
			<div class="small_poeple"></div>
		</div>
		<div class="reading_text">
			<h2>{{title}}</h2>
			<div class="content">
				<p v-for="item in content" v-html="item"></p>
			</div>
		</div>
		<div class="bom_alert">
			<div class="running" v-show="show_running">
				<div class="run_errer" @click="errerId()"></div>
				<div class="run_true" @click="tally()"></div>
				<p>正在录音<span>{{minute}}'{{second}}''</span></p>
			</div>
			<div class="ready" v-show="show_ready">
				<div id="ready_icon" :class="ready_icon"></div>
				<p>准备录音</p>
			</div>
			<div class="begin" v-show="show_start">
				<div class="tape_icon" @click="show_one()"></div>
				<p>开始录音</p>
			</div>
		</div>

	</div>
</template>
<script type="text/ecmascript-6">
	export default {
		data() {

			return {
				show_start: true,
				show_ready: false,
				show_running: false,
				minute: 0,
				second: 0,
				con: false,
				myLayer: null, //上传等待
				ready_icon: 'ready_icon3',
				chcode: '', //课文编码
				title: '三打白骨精', //范文标题
				content: [] //文章内容
			}
		},
		created() {
			let that = this;
			window.reciveUpload = function(result) {
				that.recive(result);
			}
			this.$store.commit('hidefooter');
			var chcode = this.$route.query.ch_code;
			let title = decodeURI(this.$route.query.title);
			localStorage.setItem('cur_chcode', chcode);
			localStorage.setItem('cur_title', title);
			this.chcode = chcode;
			this.title = title;
			this.$http.get(domain + '/API/SummerAct/GetModelEssayDetail', {
				params: {
					'strCode': chcode
				}
			}).then(res => {
				let content = res.body.deatil.replace(/['<span style="color:blue;">^v^</span>']/g, '').split('||');
				this.content.splice(0, 0, ...content);
			})
		},
		methods: {
			tally() {
				this.con = true;
				this.endRec();
				this.myLayer = layer.open({
					title: '正在上传，请稍后。。。',
					type: 2,
					shadeClose: false
				});
				setTimeout(() => {
					//模拟录音上传成功后操作
					//this.reciveUpload('123.mp3');
				}, 2000);
			},
			show_one() {
				this.con = false;
				this.show_start = false;
				this.show_ready = true;
				this.show_running = false;
				var self = this;
				var ready = this.show_ready;
				var running = this.show_running;
				var num = 2;
				let t_show1;
				let t_show = setInterval(() => {
					self.ready_icon = 'ready_icon' + num;
					num--;
					if(num == -1) {
						this.startRec(); //开始录音
						clearInterval(t_show);
						this.show_ready = false;
						this.show_running = true;
						if(this.show_running == true) {
							t_show1 = setInterval(() => {
								if(self.con == false) {
									if(self.second < 59) {
										self.second++;
									} else {
										self.minute++;
										self.second = 0;
									}
								} else {
									clearInterval(t_show1)
								}

							}, 1000)
						}
					}
				}, 1000);

			},
			errerId() {
				layer.confirm('确定取消录音吗?', () => {
					layer.closeAll();
					this.show_start = true;
					this.show_ready = false;
					this.show_running = false;
					this.con = true;
					this.minute = 0;
					this.second = 0;
					this.ready_icon = "ready_icon3";
				}, () => {
					return;
				});
			},
			//开始录音
			startRec() {
				try {
					appobject.Interactive("ys_startrecord");
				} catch(e) {
					return;
				}
			},
			//暂停录音
			pauseRec() {
				try {
					appobject.Interactive("ys_pauserecord");
				} catch(e) {
					return;
				}
			},
			//结束录音
			endRec() {
				try {
					appobject.Interactive("ys_stoprecord");
				} catch(e) {
					return;
				}
			},

			//接收录音文件并上传
			recive(result) {
				var v_url = result;
				layer.close(this.myLayer);
				if(v_url == 'error') {
					layer.tips('录音上传失败!');
					this.show_running = false;
					this.show_start = true;
					this.minute = 0;
					this.second = 0;
					this.con = true;
					this.ready_icon = 'ready_icon3';
				} else {
					//var repeat = localStorage.getItem('isrepeat'); //是否重复录制 0正常 1 重复
					//repeat = repeat ? 1 : 0;
					localStorage.setItem('readTitle', 1);
					setTimeout(() => {
						this.$router.push({
							path: '/readnext',
							query: {
								title: encodeURI(this.title),
								url: v_url,
								chid: this.chcode
							}
						});
					}, 1000);
				}
			},
			back() {
				this.$router.go(-1);
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/scss/_mixin";
	.fanwen_read {
		padding-bottom: 360px/$ppr;
		background-color: #f9ead4;
		position: absolute;
		width: 100%;
		height: 100%;
		.read_nav {
			width: 720px/$ppr;
			height: 96px/$ppr;
			background-color: #56af00;
			margin-bottom: 82px/$ppr;
			.back_btn {
				width: 64px/$ppr;
				height: 64px/$ppr;
				background-image: url(./img/back1.png);
				background-size: 100% 100%;
				position: absolute;
				left: 24px/$ppr;
				top: 16px/$ppr;
			}
			p {
				text-align: center;
				line-height: 96px/$ppr;
				font-size: 36px/$ppr;
				color: #FFFFFF;
			}
		}
		.prompt {
			box-sizing: border-box;
			width: 680px/$ppr;
			height: 200px/$ppr;
			margin: 0 auto;
			position: relative;
			border: 5px/$ppr solid #ad7521;
			border-radius: 100px/$ppr;
			line-height: 60px/$ppr;
			padding-top: 35px/$ppr;
			font-size: 30px/$ppr;
			padding-left: 20px/$ppr;
			color: #ff6600;
			margin-bottom: 70px/$ppr;
			.small_poeple {
				width: 166px/$ppr;
				height: 270px/$ppr;
				position: absolute;
				z-index: 2;
				right: -15px/$ppr;
				top: -26px/$ppr;
				background-image: url(./img/small_people.png);
				background-size: 100% 100%;
			}
		}
		.reading_text {
			box-sizing: border-box;
			width: 100%;
			height: auto;
			background-color: #f9ead4;
			padding: 0 36px/$ppr 200px/$ppr 20px/$ppr;
			h2 {
				text-align: center;
				line-height: 60px/$ppr;
				font-size: 34px/$ppr;
				color: #333333;
			}
			.content {
				color: #909090;
				font-size: 30px/$ppr;
				text-indent: 2em;
				p {
					line-height: 50px/$ppr;
				}
			}
		}
		.bom_alert {
			width: 720px/$ppr;
			height: 160px/$ppr;
			position: fixed;
			z-index: 5;
			bottom: 0;
			background-color: #f9ead4;
		}
		.running {
			box-sizing: border-box;
			padding-top: 20px/$ppr;
			width: 100%;
			height: 160px/$ppr;
			background-color: #FFFFFF;
			.run_errer {
				width: 75px/$ppr;
				height: 75px/$ppr;
				background-image: url(./img/errer.png);
				background-size: 100% 100%;
				float: left;
				margin-left: 230px/$ppr;
			}
			.run_true {
				width: 75px/$ppr;
				height: 75px/$ppr;
				background-image: url(./img/true.png);
				background-size: 100% 100%;
				float: right;
				margin-right: 230px/$ppr;
			}
			p {
				clear: both;
				font-size: 24px/$ppr;
				text-align: center;
				line-height: 50px/$ppr;
			}
		}
		.ready {
			box-sizing: border-box;
			padding-top: 36px/$ppr;
			width: 100%;
			height: 160px/$ppr;
			background-color: #FFFFFF;
			#ready_icon {
				width: 34px/$ppr;
				height: 58px/$ppr;
				margin: 0 auto;
			}
			.ready_icon3 {
				background-image: url(./img/time_3.png);
				background-size: 100% 100%;
			}
			.ready_icon2 {
				background-image: url(./img/time_2.png);
				background-size: 100% 100%;
			}
			.ready_icon1 {
				background-image: url(./img/time_1.png);
				background-size: 100% 100%;
			}
			p {
				font-size: 24px/$ppr;
				text-align: center;
				line-height: 80px/$ppr;
			}
		}
		.begin {
			box-sizing: border-box;
			padding-top: 26px/$ppr;
			background-color: #FFFFFF;
			width: 720px/$ppr;
			height: 160px/$ppr;
			.tape_icon {
				width: 48px/$ppr;
				height: 78px/$ppr;
				background-image: url(./img/tape.png);
				background-size: 100% 100%;
				margin: 0 auto;
			}
			p {
				font-size: 24px/$ppr;
				text-align: center;
				line-height: 60px/$ppr;
			}
		}
	}
</style>